<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
         <script> //    内部js  点击按钮音乐响,不会再次点击暂停，
        function MUSIC(IID) {
            var music=document.getElementById(IID);
            music.play();
        }
    </script>       
        <style>
            body{
                background-color: #333;
            }
            #xiaoheizi{
                /* 滑块样式 */
                position:relative;
                /* 绑定动画 */
                animation-name: myAnimation;
                /* 动画持续时间 ,慢一点，别闪眼花了*/
                animation-duration: 5s;
                /*延迟时间*/
                animation-delay: 0s;
                /* 曲线速度函数 */
                animation-timing-function:linear;
                /* 循环*/
                animation-iteration-count: infinite;
                /*交替循环*/
                animation-direction: alternate;
                animation-play-state:running;

            }
            #xiaojizi{
                position:relative;
                padding-right: 0px;
                animation-name: jiAnimation;
                animation-duration: 5s;
                animation-delay: 0s;
                animation-timing-function:linear;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-play-state: running;
            }
            #xiaoheizi:hover{
                animation-play-state: paused;
            }
            #xiaojizi:hover{
                animation-play-state: paused;
            }
            /* 作业层div样式 */
            #waicengdiv{  
             margin-left: 300px;
             padding: 0px;
                position:relative;
                width: 1000px;
                height: 500px;
                border: 1px solid blue;
                background-image:  url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3-sign.bdxiguaimg.com%2Ftos-cn-i-0000%2F43595928e34b4283ac0c8a08d497e2ec~640x0.image%3Fx-expires%3D1661760861%26x-signature%3DZ6PaDul%252BzjgLNmSSY3KD51DpchI%253D&refer=http%3A%2F%2Fp3-sign.bdxiguaimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666692679&t=c331fec86ef3c6476e8ac949500e1c6d);
               background-size: contain;
                background-repeat: repeat-x;
            }
            h1{
                position: relative;
                top: 0%;
                left: 40%;
            } 
            /* 滑块动画 */
            @keyframes myAnimation{
                from{
                    left: 0px;
                    top: 0px;
                    transform: rotate(0deg);
                    transform:scale(2,1);
                }
                50%{
                    left: 900px;
                    top: 200px;
                    transform: rotate(360deg);
                    transform:scale(1,2);
                    
                }
                to{left: 0px;
                    top: 400px; 
                    transform: rotate(0deg);
                }
            } 
            @keyframes jiAnimation{
                from{ left: 800px;
                    top: 0px;
                    transform: rotate(0deg)
                }
                50%{left: -100px;
                top: 200px;
                transform: rotate(720deg);
                }
                to{ top:400px;
                    left: 800px;
                    transform: rotate(0deg)
                }
            }    
            button{
                position: relative;
            }

/*从这里一下的css基本上都是老师的代码*/
            @keyframes rotate {
        100% {
          transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
      }
      .container { position: fixed;
        top: 0%;
        left: 40px;
        width: 20em;
        height: 20em;
        transform-style: preserve-3d; 
        animation: rotate 5s infinite linear;
        animation-delay: 0.5s;
        animation-direction: alternate-reverse;
      }
      .container:hover {
        animation-play-state:;
      }
      .cube {
        position: absolute;
        width: 10em;
        height: 10em;
        transform-style: preserve-3d;
      }
      .cube--1 {
        transform: rotateX(45deg) rotateY(45deg);
      }

      .side {
        position: absolute;
        align-items: center;
        width: 10em;
        height: 10em;
        border: 2px solid rgba(255, 213, 0, 0.35);
        border-radius: 50%;
        background-color: rgb(179, 179, 214);
        transform-style: preserve-3d;
        transform: rotateY(180deg);
      }
      .side::before,
      .side::after {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        box-sizing: border-box;
        border-radius: inherit;
        border: 1px solid;
        box-shadow: 0 0 2em, 0 0 2em;
      }
      .side::before {
        width: 2.5em;
        height: 2.5em;
        color: gold;
      }
      .side::after {
        width: 1.5em;
        height: 1.5em;
        transform: translateZ(-2em);
        box-shadow: inset 0 0 1em, 0 0 1em;
        color: teal;
      }
      .side--back {
        transform: translateZ(-5em) rotateY(180deg);
      }
      .side--left {
        transform: translateX(-5em) rotateY(-90deg);
      }
      .side--right {
        transform: translateX(5em) rotateY(90deg);
      }
      .side--top {
        transform: translateY(-5em) rotateX(90deg);
      }
      .side--bottom {
        transform: translateY(5em) rotateX(-90deg);
      }
      .side--front {
        transform: translateZ(5em);
      }
      span {
        font-size: 25px;
        color: red;
        font-weight: bold;
        position: absolute;
        left: 72px;
        top: 64px;
      }

      img{
        width: 100%;
        height: 100%;
        
      }
      button{
        margin: 100px;
width: 140px;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;

position: relative;
overflow: hidden;
}
        </style>
</head>
<body> 
    <div id="waicengdiv">
        <img id="xiaoheizi" style="width: 100px; height:100px"   src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fraw%2Fpublic%2Fp106878681.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666588543&t=1606b9e32b9bf93837eb7103256fa975" >
        <img id="xiaojizi" style="width: 100px; height:100px" src="https://img1.baidu.com/it/u=300671431,434297336&fm=253&fmt=auto&app=138&f=JPEG?w=511&h=500">
</div>
<div id="seconddiv">
    <button  onclick="MUSIC('xianjian')" >仙剑鸡侠传</button> 
    <button onclick="MUSIC('xiexie')"  >听我说谢谢鸡</button>
    <button onclick="MUSIC('xiqing')"  >喜庆鸡</button>
    <button onclick="MUSIC('yeye')"  >耶耶鸡</button>
</div>
    <!-- <button  style="margin:100px; background-color: aqua;" onclick="onclick('xianjian')" >仙剑鸡侠传</button> 
    <button style="background-color: aqua ; margin:100px; " onclick="onclick('xiexie')">听我说谢谢鸡</button>
    <button  style="background-color: aqua;margin:100px;  " onclick="onclick('xiqing')">喜庆鸡</button>
    <button  style="background-color: aqua  ;margin:100px;" onclick="onclick('yeye')">耶耶鸡</button> -->
    <h1 style="position: absolute; top:65%">音乐块</h1>
    <div class="container">
        <div class="cube cube--1">
          <div class="side side--back"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F50b8c8203a4bec9ea1e47332df91c6c021ff2476.gif&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666948378&t=6e54a602a598bb6b0d056a39d1b1cf39" alt=""></div>
          <div class="side side--left"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190509%2Fd530326e8e71455881e32e01dbbdced4.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666692855&t=2a1de57da8bbfdb95122ba87beb45c41" alt=""></div>
          <div class="side side--right"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190509%2Fd530326e8e71455881e32e01dbbdced4.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666692855&t=2a1de57da8bbfdb95122ba87beb45c41" alt=""></div>
          <div class="side side--top"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190509%2Fd530326e8e71455881e32e01dbbdced4.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666692855&t=2a1de57da8bbfdb95122ba87beb45c41" alt=""></div>
          <div class="side side--bottom"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F50b8c8203a4bec9ea1e47332df91c6c021ff2476.gif&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666692679&t=9e617ac37ce9684114195aa6dd971106" alt=""></div>
          <div class="side side--front"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F50b8c8203a4bec9ea1e47332df91c6c021ff2476.gif&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666692679&t=9e617ac37ce9684114195aa6dd971106" alt=""></div>
        </div>
      </div>
  <!-- 我不知道为啥关于audio的只能用绝对路径 -->
      <audio src="D:\Git\myfirst\src\mp3\xianjianji.mp3" id="xianjian"  ></audio>
    <audio src="D:\Git\myfirst\src\mp3\xiexieji.mp3" id="xiexie"  ></audio>
    <audio src="D:\Git\myfirst\src\mp3\xiqingji.mp3" id="xiqing" ></audio>
    <audio src="D:\Git\myfirst\src\mp3\yeyeji.mp3"   id="yeye" ></audio>
    

</body>
</html>